<template>
  <div class="order-detail">
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="order-item">
      <h5>
        <span>收货人:{{ list.receiver }}</span>
        <span class="time"
          >下单时间：{{
            new Date(list.createdAt).toLocaleString().replace(/:\d{1,2}$/, " ")
          }}</span
        >
      </h5>
      <van-card
        v-for="detail in details"
        :key="detail.id"
        :num="detail.amount"
        :price="detail.price.toFixed(2)"
        :title="detail.product.name"
        :thumb="detail.product.coverImage | dalImg"
      />
      <div class="bto">
        <h6>
          <p class="num">共{{ details.length }}件</p>
          <p class="total">
            合计:
            <span>￥{{ list.price }}</span>
          </p>
        </h6>
      </div>
    </div>
    <div class="address">
      <van-icon name="location-o" />
      收货地址：
      <span>{{ list.address }}</span>
    </div>
  </div>
</template>

<script>
import { orderDetailsAPI } from "../services/Orders";

export default {
  data() {
    return {
      list: [],
      details: [],
    };
  },
  async created() {
    const res = await orderDetailsAPI(this.$route.query.id);
    // console.log(res);
    this.list = res.data;
    this.details = res.data.details;
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.order-detail h3 {
  text-align: center;
  background: #fff;
  padding: 0.8rem 0;
  font-size: 1rem;
}
.order-item {
  background: #fff;
  margin: 0.5rem 0;
}
.order-item h5,
.order-item .bto {
  border-bottom: 1px solid #ccc;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  overflow: hidden;
}
.order-item .bto h6 {
  overflow: hidden;
  padding: 0.8rem;
  font-size: 0.9rem;
  font-weight: 400;
}
.order-item .bto .num {
  float: left;
}
.order-item .bto .total {
  float: right;
}
.order-item .bto .total span {
  color: deeppink;
  font-weight: bold;
}
.order-item h5 .time {
  float: right;
}
.order-item p .total {
  float: right;
}
.address {
  margin: 0.5rem 0;
  padding: 1rem 0.5rem;
  background: #fff;
}
.address i {
  color: orange;
  font-weight: bold;
}
.address span {
  color: rgb(255, 111, 0);
}
</style>